<template>
	<div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
		<div class="avue-header">
			<!-- 顶部导航栏 -->
			<top ref="top" />
		</div>
		<div class="avue-layout">
			<div class="avue-left">
				<!-- 左侧导航栏 -->
				<sidebar />
			</div>
			<div class="avue-main">
				<!-- 顶部标签卡 -->
				<tags />
				<transition name="fade-scale"><search class="avue-view" v-show="isSearch"></search></transition>
				<!-- 主体视图层 -->
				<div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
					<keep-alive><router-view class="avue-view" v-if="$route.meta.keepAlive" /></keep-alive>
					<router-view class="avue-view" v-if="!$route.meta.keepAlive" />
				</div>
			</div>
		</div>
		<!-- 		<div class="msgbox">
			<img class="msg pointer" src="../../../public/img/msg.png" @click="showmsg=true">
		</div> -->
		<div class="msgbox">
			<div class="num flex_center">4</div>
			<img class="msg pointer" src="../../../public/img/msg_active.png" @click="showmsg = true" />
		</div>
		<el-drawer :visible.sync="showmsg" :with-header="false" show-close>
			<div class="drawer">
				<div class="flex_start title">
					<b class="f18">未处理消息</b>
					<span class="num">1</span>
				</div>
				<div class="message-con" :style="{ height: $height - 120 + 'px' }">
					<div class="msgItem f14" :class="{ read: item.type == 4 }" v-for="(item, i) in msgList" :key="i">
						<div class="msg_t">
							<span class="warn_f f16">{{ item.title }}</span>
							<!-- msgType	消息类型：0-工作消息，1-系统消息     工作消息代表代办任务 系统消息代表我发起的 -->
							<template v-if="item.msgType == 0">
								<span class="type">工作消息</span>
								<span class="type">待办任务</span>
							</template>
							<template v-else>
								<span class="type">系统消息</span>
								<span class="type">我发起的</span>
							</template>
						</div>
						<div class="content">{{ item.content }}</div>
						<div class="content">任务归属：{{ item.belong }}</div>
						<div class="bottom" v-if="item.type != 4 && item.msgType == 0">
							<el-button type="primary" size="mini">
								去{{ progressTypes[item.type] }}
								<i class="el-icon-arrow-right"></i>
							</el-button>
						</div>
					</div>
				</div>

				<div class="pub_center pagenum">
					<el-pagination
						@size-change="sizeChangeHandle"
						@current-change="currentChangeHandle"
						:current-page="pageNo"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pageSize"
						:total="total"
						layout="total, prev, pager, next"
					></el-pagination>
				</div>
			</div>
		</el-drawer>
		<div class="avue-shade" @click="showCollapse"></div>
		<message-dialog></message-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import tags from './tags';
import search from './search';
import top from './top/';
import sidebar from './sidebar/';
import admin from '@/util/admin';
import { validatenull } from '@/util/validate';
import { calcDate } from '@/util/date.js';
import { getStore } from '@/util/store.js';
import { getmsglist } from '@/api/myapi/common.js';
import messageDialog from './messageDialog.vue';
export default {
	components: {
		top,
		tags,
		search,
		sidebar,
		messageDialog
	},
	name: 'index',
	provide() {
		return {
			index: this
		};
	},
	data() {
		return {
			//搜索控制
			isSearch: false,
			showmsg: false,
			//刷新token锁
			refreshLock: false,
			//刷新token的时间
			refreshTime: '',
			msgList: [],
			pageNo: 1,
			pageSize: 6,
			total: 1
		};
	},
	created() {
		//实时检测刷新token
		this.refreshToken();
	},
	mounted() {
		this.init();
		this.getmsglist();
	},
	computed: mapGetters(['isMenu', 'isLock', 'isCollapse', 'website', 'menu']),
	props: [],
	methods: {
		//   消息列表
		// 当前页
		currentChangeHandle(val) {
			this.pageNo = val;
			this.getmsglist(val);
		},
		getmsglist(pageNo = 1) {
			getmsglist({
				userId: this.userInfo.user_id,
				current: pageNo,
				size: 5,
				descs: 'create_time'
			}).then(({ data }) => {
				console.log('消息');
				console.log(data);
				if (data.code == 200 && data.success) {
					this.msgList = data.data.records;
					this.total = data.data.total;
				}
			});
		},
		showCollapse() {
			this.$store.commit('SET_COLLAPSE');
		},
		// 初始化
		init() {
			this.$store.commit('SET_SCREEN', admin.getScreen());
			window.onresize = () => {
				setTimeout(() => {
					this.$store.commit('SET_SCREEN', admin.getScreen());
				}, 0);
			};
			this.$store.dispatch('FlowRoutes').then(() => {});
		},
		//打开菜单
		openMenu(item = {}) {
			this.$store.dispatch('GetMenu', item.id).then(data => {
				if (data.length !== 0) {
					this.$router.$avueRouter.formatRoutes(data, true);
				}
				//当点击顶部菜单后默认打开第一个菜单
				/*if (!this.validatenull(item)) {
					  let itemActive = {},
					    childItemActive = 0;
					  if (item.path) {
					    itemActive = item;
					  } else {
					    if (this.menu[childItemActive].length === 0) {
					      itemActive = this.menu[childItemActive];
					    } else {
					      itemActive = this.menu[childItemActive].children[childItemActive];
					    }
					  }
					  this.$store.commit('SET_MENU_ID', item);
					  this.$router.push({
					    path: this.$router.$avueRouter.getPath({
					      name: (itemActive.label || itemActive.name),
					      src: itemActive.path
					    }, itemActive.meta)
					  });
					}*/
			});
		},
		// 定时检测token
		refreshToken() {
			this.refreshTime = setInterval(() => {
				const token =
					getStore({
						name: 'token',
						debug: true
					}) || {};
				const date = calcDate(token.datetime, new Date().getTime());
				if (validatenull(date)) return;
				if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
					this.refreshLock = true;
					this.$store
						.dispatch('refreshToken')
						.then(() => {
							this.refreshLock = false;
						})
						.catch(() => {
							this.refreshLock = false;
						});
				}
			}, 10000);
		}
	}
};
</script>
<style type="text/css" lang="scss" scoped>
.avue-header {
	color: #ffffff;
}
.message-con {
	overflow-y: scroll;
}

.msgbox {
	position: fixed;
	right: -34px;
	bottom: 100px;
	z-index: 99;
	width: 84px;
	height: 84px;
	transition: all 0.2s;
}

.msgbox:hover {
	position: fixed;
	right: -20px;
	bottom: 100px;
	width: 84px;
	height: 84px;
}

.msgbox .num {
	position: absolute;
	left: -2px;
	top: 6px;
	font-size: 12px;
	width: 24px;
	height: 24px;
	color: #ffffff;
	border-radius: 50%;
	border: 2px solid #ffffff;
	background-color: #e05242;
	font-weight: bold;
}

.msg {
	width: 84px;
	height: 84px;
}

.drawer {
	padding: 20px;
	overflow-y: scroll;
	min-height: 100%;

	.title {
		margin-bottom: 20px;
	}
}

.drawer .num {
	display: inline-block;
	font-size: 12px;
	min-width: 18px;
	line-height: 18px;
	text-align: center;
	margin-left: 8px;
	padding: 0 4px;
	box-sizing: border-box;
	color: #ffffff;
	border-radius: 50%;
	background-color: #e05242;
}

.msgItem {
	width: 400px;
	padding: 16px 30px;
	background: #ffffff;
	border: 1px solid #e4e8ed;
	opacity: 1;
	border-radius: 4px;
	margin-bottom: 20px;

	.msg_t {
		margin-bottom: 16px;
	}

	.type {
		display: inline-block;
		font-size: 10px;
		height: 18px;
		background: #f0f2f5;
		border: 1px solid #dce1e6;
		border-radius: 2px;
		padding: 0 4px;
		margin-left: 10px;
		color: #606366;
	}

	.content {
		line-height: 1.5;
	}

	.bottom {
		margin-top: 20px;
	}
}

.read {
	background-color: #f4f4f5 !important;
	opacity: 0.5;
}
</style>
